<template>
  <div>
    <el-breadcrumb separator="/" style="margin-bottom:20px;font-size:14px;">
      <el-breadcrumb-item :to="{ path: '/tahome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据分析</el-breadcrumb-item>
      <el-breadcrumb-item>{{menuTitle}}</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="border-card" @input="handleTabsClick" v-loading="loading"
             element-loading-text="数据加载中，请稍后...">
      <el-tab-pane label="国内旅游" class="tabpan">
        <el-row justify="end">
          <el-col :span="4" v-for="(g,index) in gn" :key="index">
            <el-button :plain="g.active" :type="g.type" @click="handleButtonClickGn(index)">{{g.title}}</el-button>
          </el-col>
          <el-col :span="4" :offset="3">
            <div class="block">
              <el-date-picker v-model="gnyear" align="right" type="year" value-format="yyyy" placeholder="选择年" @change="changGnData">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
        <div style="padding: 30px;">
          <keep-alive>
            <component ref="selectData" :is="currentView" :thisYear="baseThis" :lastYear="baseLast">
              <!-- 非活动组件将被缓存！ -->
            </component>
          </keep-alive>
        </div>
      </el-tab-pane>
      <el-tab-pane label="入境旅游" class="tabpan">
        <el-row>
          <el-col :span="4" v-for="(r,index) in rj" :key="index">
            <el-button :plain="r.active" :type="r.type" @click="handleButtonClickRj(index)">{{r.title}}</el-button>
          </el-col>
          <el-col :span="4" :offset="3">
            <div class="block">
              <el-date-picker v-model="rjyear" align="right" type="year" placeholder="选择年" @change="changrjData">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
        <div style="padding: 30px;">
          <keep-alive>
            <component ref="rjData" :is="rjView" :thisYear="rjThis" :lastYear="rjLast">
              <!-- 非活动组件将被缓存！ -->
            </component>
          </keep-alive>
        </div>
      </el-tab-pane>
      <el-tab-pane label="出境旅游" class="tabpan">
        <el-row>
          <el-col :span="4" v-for="(c,index) in cj" :key="index">
            <el-button :plain="c.active" :type="c.type" @click="handleButtonClickCj(index)">{{c.title}}</el-button>
          </el-col>
          <el-col :span="4" :offset="11">
            <div class="block">
              <el-date-picker v-model="cjyear" align="right" type="year" placeholder="选择年" @change="changcjData">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
        <div style="padding: 30px;">
          <keep-alive>
            <component ref="cjData" :is="cjView" :thisYear="cjThis" :lastYear="cjLast">
              <!-- 非活动组件将被缓存！ -->
            </component>
          </keep-alive>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div id="main"></div>
  </div>
</template>
<script>
  import {mapGetters, mapActions} from 'vuex';
  import {getCharts, updateCharts} from '../../util';
  import store from '../../store'
  import {getAnyLisis} from '../../api'

  //=============国内旅游组件
  var gnzzrc = {
    template: '<div id="gnzzrc"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('gnzzrc', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('gnzzrc', nowData, pastData);
      }
    }
  }
  var gnjdrc = {
    template: '<div id="gnjdrc"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('gnjdrc', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('gnzzrc', nowData, pastData);
      }
    }
  }
  var gnzzrt = {
    template: '<div id="gnzzrt"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('gnzzrt', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('gnzzrc', nowData, pastData);
      }
    }
  }
  var gnjdrt = {
    template: '<div id="gnjdrt"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('gnjdrt', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('gnzzrc', nowData, pastData);
      }
    }
  }
  //=====================入境旅游组件
  var rjzzrc = {
    template: '<div id="rjzzrc"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('rjzzrc', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('rjzzrc', nowData, pastData);
      }
    }
  }
  var rjjdrc = {
    template: '<div id="rjjdrc"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('rjjdrc', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('rjjdrc', nowData, pastData);
      }
    }
  }
  var rjzzrt = {
    template: '<div id="rjzzrt"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('rjzzrt', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('rjzzrt', nowData, pastData);
      }
    }
  }
  var rjjdrt = {
    template: '<div id="rjjdrt"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('rjjdrt', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('rjjdrt', nowData, pastData);
      }
    }
  }
  //==========出境旅游
  var cjrc = {
    template: '<div id="cjrc"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('cjrc', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('cjrc', nowData, pastData);
      }
    }
  }
  var cjrt = {
    template: '<div id="cjrt"></div>',
    props: [
      'thisYear', 'lastYear'
    ],
    mounted() {
      this.$nextTick(() => {
        getCharts('cjrt', this.thisYear, this.lastYear);
      })
    },
    methods: {
      reflsh(nowData,pastData) {
        updateCharts('cjrt', nowData, pastData);
      }
    }
  }


  export default {
    computed: {
      ...mapGetters(['chartsData','sysinfo']),
      arrayData(){
        return this.chartsData.length === 0 && sessionStorage.getItem("chartsData") ? JSON.parse(sessionStorage.getItem("chartsData")) : this.chartsData;
      },
      // info(){
      //   return this.sysinfo.year ? this.sysinfo : JSON.parse(sessionStorage.getItem("sysinfo"));
      // }
    },
    created() {
      this.$store.dispatch('getAnyLisis',{year:this.sysinfo.year});
    },
    data() {
      return {
        currentView: gnzzrc,
        rjView:rjzzrc,
        cjView:cjrc,
        loading: false,
        gnindex: 0,
        rjindex: 0,
        cjindex: 0,
        gnyear: '',
        rjyear:'',
        cjyear:'',
        tabTitles: ['国内旅游', '入境旅游', '出境旅游'],
        gn: [
          {
            title: '组织人次数',
            active: false,
            view: gnzzrc,
            type: 'success',
          }, {
            title: '接待人次数',
            active: true,
            view: gnjdrc,
            type: 'warning',
          }, {
            title: '组织人天数',
            active: true,
            view: gnzzrt,
            type: 'danger',
          }, {
            title: '接待人天数',
            active: true,
            view: gnjdrt,
            type: 'primary',
          },
        ],
        rj: [
          {
            title: '组织人次数',
            active: false,
            view: rjzzrc,
            type: 'success',
          },
          {
            title: '接待人次数',
            active: true,
            view: rjjdrc,
            type: 'warning',
          },
          {
            title: '组织人天数',
            active: true,
            view: rjzzrt,
            type: 'danger',
          },
          {
            title: '接待人天数',
            active: true,
            view: rjjdrt,
            type: 'primary',
          },
        ],
        cj: [
          {
            title: '人次数',
            active: false,
            view:cjrc,
            type: 'success',
          },
          {
            title: '人天数',
            active: true,
            view:cjrt,
            type: 'warning',
          }
        ],
        menuTitle: '国内旅游',
        baseThis: [0, 0, 0, 0],
        baseLast: [0, 0, 0, 0],
        rjThis: [0, 0, , 0, 0],
        rjLast: [0, 0, 0, 0],
        cjThis: [0, 0, 0, 0],
        cjLast: [0, 0, 0, 0],
      }
    },
    mounted() {
      this.$nextTick(()=>{
        this.loading = true;
        setTimeout(() => {
          this.arrayData.map((item) => {
            const quater = parseInt(item.season);
            if(item.year == parseInt(this.sysinfo.year)){
              this.baseThis[quater-1] = item.inboundLiaisonPNum;
              this.rjThis[quater-1] = item.internalOrganizePNum;
              this.cjThis[quater-1] = item.outboundOrganizePNum;
            }else{
              this.baseLast[quater-1] = item.inboundLiaisonPNum;
              this.rjLast[quater-1] = item.internalOrganizePNum;
              this.cjLast[quater-1] = item.outboundOrganizePNum;
            }
            this.$refs.selectData.reflsh(this.baseThis,this.baseLast);
            this.$refs.rjData.reflsh(this.rjThis,this.rjLast);
            this.$refs.cjData.reflsh(this.cjThis,this.cjLast);
            this.loading = false;
          })
        },1000);
      })
    },
    methods: {
      changGnData(value) {
        if(value){
          var _this = this;
          this.$http.fetchGet('/ta/anylisis/'+value).then((res) => {
            if(res.data.length === 0){
              _this.baseThis = [0,0,0,0];
              _this.baseLast = [0,0,0,0];
            }else{
              res.data.map((item) => {
                const quater = parseInt(item.season);
                let value;
                switch (_this.gnindex) {
                  case 0:
                    value = item.inboundLiaisonPNum;
                    break;
                  case 1:
                    value = item.inboundReceptionPNum;
                    break;
                  case 2:
                    value = item.inboundLiaisonPDNum;
                    break;
                  case 3:
                    value = item.inboundReceptionPDNum;
                    break;
                  default:
                    value = item.inboundLiaisonPNum;
                    break;
                }
                if(item.year == parseInt(this.sysinfo.year)){
                  _this.baseThis[quater - 1] = value;
                }else{
                  _this.baseLast[quater - 1] = value;
                }

              })
            }
            _this.$refs.selectData.reflsh(_this.baseThis,_this.baseLast)
          })
        }
      },
      changrjData(value) {
        if(value){
          var _this = this;
          this.$http.fetchGet('/ta/anylisis/'+value).then((res) => {
            if(res.data.length === 0){
              _this.rjThis = [0,0,0,0];
              _this.rjLast = [0,0,0,0];
            }else{
              res.data.map((item) => {
                const quater = parseInt(item.season);
                switch (_this.rjindex) {
                  case 0:
                    value = item.internalOrganizePNum;
                    break;
                  case 1:
                    value = item.internalReceptionPNum;
                    break;
                  case 2:
                    value = item.internalOrganizePDNum;
                    break;
                  case 3:
                    value = item.internalReceptionPDNum;
                    break;
                  default:
                    value = item.internalOrganizePNum;
                    break;
                }
                if(item.year == parseInt(this.sysinfo.year)){
                  _this.rjThis[quater-1] = value;
                }else{
                  _this.rjLast[quater-1] = value;
                }
              })
            }
            _this.$refs.rjData.reflsh(_this.rjThis,_this.rjLast)
          })
        }
      },
      changcjData(value) {
        if(value){
          var _this = this;
          this.$http.fetchGet('/ta/anylisis/'+value).then((res) => {
            if(res.data.length === 0){
              _this.cjThis = [0,0,0,0];
              _this.cjLast = [0,0,0,0];
            }else{
              res.data.map((item) => {
                const quater = parseInt(item.season);
                let value;
                switch (_this.cjindex) {
                  case 0:
                    value = item.outboundOrganizePNum;
                    break;
                  case 1:
                    value = item.outboundOrganizePDNum;
                    break;
                  default:
                    value = item.outboundOrganizePNum;
                    break;
                }
                if(item.year == parseInt(this.sysinfo.year)){
                  _this.cjThis[quater-1] = item.value;
                }else{
                  _this.cjLast[quater-1] = item.value;
                }
              })
            }
            _this.$refs.cjData.reflsh(_this.cjThis,_this.cjLast)
          })
        }
      },
      handleButtonClickGn(index) {
        if (this.gn[index].active) {
          this.gn.map(g => {
            g.active = true;
          });
          this.currentView = this.gn[index].view;
          this.gn[index].active = false;
          this.gnindex = index;
          this.gnyear = '';
          this.arrayData.map((item) => {
            const quater = parseInt(item.season);
            let value;
            switch (index) {
              case 0:
                value = item.inboundLiaisonPNum;
                break;
              case 1:
                value = item.inboundReceptionPNum;
                break;
              case 2:
                value = item.inboundLiaisonPDNum;
                break;
              case 3:
                value = item.inboundReceptionPDNum;
                break;
              default:
                value = item.inboundLiaisonPNum;
                break;
            }
            if (item.year === parseInt(this.sysinfo.year)) {
              this.baseThis[quater-1] = value
            } else {
              this.baseLast[quater-1] = value;
            }
          })
        }
      },
      handleButtonClickRj(index) {
        if (this.rj[index].active) {
          this.rj.map(r => {
            r.active = true;
          });
          this.rjView = this.rj[index].view;
          this.rj[index].active = false;
          this.rjindex = index;
          this.rjyear = '';
          this.arrayData.map((item) => {
            const quater = parseInt(item.season);
            let value;
            switch (index) {
              case 0:
                value = item.internalOrganizePNum;
                break;
              case 1:
                value = item.internalReceptionPNum;
                break;
              case 2:
                value = item.internalOrganizePDNum;
                break;
              case 3:
                value = item.internalReceptionPDNum;
                break;
              default:
                value = item.internalOrganizePNum;
                break;
            }
            if (item.year === parseInt(this.sysinfo.year)) {
              this.rjThis[quater-1] = value
            } else {
              this.rjLast[quater-1] = value;
            }
          })
        }
      },
      handleButtonClickCj(index) {
        if (this.cj[index].active) {
          this.cj.map(c => {
            c.active = true;
          });
          this.cjView = this.cj[index].view;
          this.cj[index].active = false;
          this.cjindex = index;
          this.cjyear='';
          this.arrayData.map((item) => {
            const quater = parseInt(item.season);
            let value;
            switch (index) {
              case 0:
                value = item.outboundOrganizePNum;
                break;
              case 1:
                value = item.outboundOrganizePDNum;
                break;
              default:
                value = item.outboundOrganizePNum;
                break;
            }
            if (item.year === parseInt(this.sysinfo.year)) {
              this.cjThis[quater-1] = value
            } else {
              this.cjLast[quater-1] = value;
            }
          })
        }
      },
      handleTabsClick(value) {
        this.menuTitle = this.tabTitles[value];
      }
    }
  }
</script>
<style scoped>

  .tabpan {
    padding: 0px 30px;
  }
</style>
